Design Gallery - Merchant Setup Guide

📖 Overview

The Design Gallery feature allows you to showcase pre-made designs that customers can select and use on custom hats through Hat Lab. This guide will walk you through setting up and testing the feature in your Shopify admin.

🎯 What This Feature Does

For Your Customers:

• Browse a gallery of pre-made designs
• Preview designs in full-size before selecting
• Select a design and bring it directly into Hat Lab
• Use designs from pre-finished hat products on custom hats
• See their selected design throughout the customization process

For Your Store:

• Showcase your design library
• Bridge pre-finished products to custom orders
• Streamline the Hat Lab experience with pre-made options
• Track design selections in orders

---

📋 Setup Instructions

Step 1: Create Design Storage (Metaobjects)

Metaobjects allow you to store your designs in Shopify. You'll create two definitions: one for individual designs, and one for galleries.

A. Create "Design Item" Definition

This stores individual designs (the actual artwork/logos).

1. Go to Shopify Admin → Settings → Metafields and metaobjects → Metaobject definitions

2. Click "Add definition"

3. Enter these settings:

   • Name: Design Item
   • Type: design_item

4. Click "Add field" and create these fields:

   Field 1: Title

   • Type: Single line text
   • Name: title
   • Mark as Required

   Field 2: Image

   • Type: File
   • Name: image
   • Mark as Required
   • ℹ️ This is the full-size design image

   Field 3: Thumbnail (Optional)

   • Type: File
   • Name: thumbnail
   • ℹ️ Smaller version for grid view (uses main image if empty)

   Field 4: Description (Optional)

   • Type: Multi-line text
   • Name: description
   • ℹ️ Additional details shown in preview

5. Click "Save"

B. Create "Design Gallery" Definition

This groups multiple designs into a collection.

1. Stay in Metaobject definitions and click "Add definition"

2. Enter these settings:

   • Name: Design Gallery
   • Type: design_gallery

3. Click "Add field" and create:

   Field: Designs

   • Type: List of entries
   • Name: designs
   • Reference type: Design Item
   • ℹ️ You'll select which designs appear in this gallery

4. Click "Save"

C. Add Design Reference to Products

This connects pre-finished hat products to their designs.

1. Go to Settings → Metafields and metaobjects → Products

2. Click "Add definition"

3. Enter these settings:

   • Name: Design Reference
   • Namespace and key: custom.design_reference
   • Type: Metaobject reference (one entry)
   • Metaobject: Design Item
   • ℹ️ This links a product to a specific design

4. Click "Save"

Step 2: Add Your Designs

Now you'll upload your actual design files and organize them into galleries.

A. Create Design Items

Add each design individually:

1. Go to Shopify Admin → Content → Metaobjects

2. Select "Design Items" from the list

3. Click "Add entry"

4. Fill in the design details:

   Title: Give it a clear name (e.g., "Vintage Logo", "Classic Stripe")

   • Keep it under 30 characters
   • Use customer-friendly names

   Image: Upload the full-size design file

   • Recommended: 1200x1200px or larger
   • Use JPG or PNG format
   • This is what customers see in the lightbox preview

   Thumbnail: (Optional) Upload a smaller version

   • Recommended: 400x400px
   • If left empty, the main image will be used
   • Helps with page load speed

   Description: (Optional) Add design details

   • What makes this design special?
   • Any restrictions or best uses
   • Shows in the preview lightbox

5. Click "Save"

6. Repeat for each design you want to offer

💡 Tip: Start with 5-10 designs to test the feature, then add more as needed.

B. Create a Design Gallery

Group your designs into a collection:

1. Stay in Content → Metaobjects

2. Select "Design Galleries"

3. Click "Add entry"

4. In the "Designs" field:

   • Click "Browse"
   • Select all the Design Items you want in this gallery
   • You can reorder them by dragging

5. Click "Save"

💡 Tip: You can create multiple galleries for different collections or seasons.

Step 3: Add Gallery to Your Store

Create a page where customers can browse and select designs.

A. Create the Page

1. Go to Shopify Admin → Online Store → Pages
2. Click "Add page"
3. Give it a title (e.g., "Design Gallery", "Choose Your Design", "Pre-Made Designs")
4. Save the page (content will be added via theme customizer)

B. Add the Gallery Section

1. In the page editor, click "Customize" (top right)
2. In the theme editor, click "Add section"
3. Select "Design Gallery"
4. Configure the settings:

Content Settings:

• Design gallery container: Select your gallery from Step 2B
• Designs field name: Leave as designs (unless you renamed it)
• Heading: e.g., "Choose Your Design"
• Subheading: (Optional) Add context like "Pick a design to customize your hat"
• Button text: Text on hover buttons (e.g., "Bring to Hat Lab", "Select Design")

Layout Settings:

• Designs per row (desktop): How many designs show side-by-side (recommended: 3-4)
• Designs per row (mobile): How many on phone screens (recommended: 1-2)
• Gap between designs: Spacing (recommended: Medium)
• Border radius: Rounded corners (optional, for modern look)

Empty State:

• Message when empty: What shows if no designs exist (for testing)

5. Click "Save" (top right)

💡 Tip: Preview on mobile and desktop to ensure the layout looks good on all devices.

Step 4: Add Design Features to Products (Optional)

You can add design selection directly to product pages in two ways:

Option A: Pre-Finished Hat Bridge

Let customers use a design from a pre-finished product on a custom hat.

1. Add the Block to Product Template

1. Go to Online Store → Themes → Customize

2. Navigate to Products → Default product (or your product template)

3. In the product information section, click "Add block"

4. Select "Use Design on Custom Hat"

5. Configure settings:

   • Button text: "Use this design on a custom hat"
   • Button style: Primary, Secondary, or Outline
   • Show design preview: Toggle on (shows the design image)
   • Required product tag: (Optional) Enter pre-finished to only show on tagged products

6. Position the block where you want it (drag to reorder)

7. Click "Save"

2. Connect Designs to Products

For each pre-finished hat product:

1. Go to Products in Shopify admin
2. Open the pre-finished hat product
3. Scroll to "Metafields" section
4. Find "Design Reference"
5. Click "Select entry" and choose the design for this product
6. Click "Save"

Now when customers view this product, they'll see a button to use that design in Hat Lab.

Option B: Design Selector on Hat Lab Products

Let customers choose designs directly on custom hat product pages.

1. Add the Block

1. Go to Online Store → Themes → Customize

2. Navigate to your Hat Lab product template

3. In the product information section, click "Add block"

4. Select "Product Design Selector"

5. Configure settings:

   Content:

   • Property key: Design (this is what appears in orders)
   • Heading: "Choose a Design"
   • Gallery container: Select your gallery
   • Designs field name: designs

   Display:

   • Show thumbnails: Toggle on
   • Selection mode:
     • Single (radio) - customer picks one design
     • Multiple (checkbox) - customer can pick several
   • Thumbnail size: Small, Medium, or Large

   Filters: (Optional)

   • Required product tag: Only show on products with this tag

6. Click "Save"

Option C: Hide File Uploads When Design Selected

Automatically hide file upload options when a customer selects a design.

1. In Theme Customizer, find your "Product File Upload" block
2. Open the block settings
3. Enable "Hide when design is selected"
4. Click "Save"

Now the file upload will automatically hide when a design is chosen, and reappear if the design is removed.

💡 Tip: You can use any combination of these options. Test each to see what works best for your store.

---

🧪 Testing Your Setup

Test each feature to ensure everything works correctly for your customers.

Test 1: Design Gallery Page

Test the gallery displays correctly:

1. Visit your design gallery page
2. Check that:
   • ✅ All your designs appear in the grid
   • ✅ Design names show below each image
   • ✅ Grid looks good on desktop
   • ✅ Grid adjusts properly on mobile/tablet

Test the hover button:

1. Hover your mouse over a design card (desktop only)
2. Check that:
   • ✅ "Bring to Hat Lab" button appears
   • ✅ Card lifts slightly when hovering

Test selecting a design:

1. Click the "Bring to Hat Lab" button on any design
2. Check that:
   • ✅ You're redirected to Hat Lab (Step 1)
   • ✅ Design continues to next step (see Test 2)

Test 2: Design Lightbox Preview

Test the preview popup:

1. On the gallery page, click directly on a design card (not the button)
2. Check that:
   • ✅ Large preview popup appears
   • ✅ Design shows full-size and clear
   • ✅ Design title appears
   • ✅ Description appears (if you added one)

Test closing the preview:

1. Try each way to close:
   • ✅ Click the X button (top right)
   • ✅ Click outside the preview (on dark area)
   • ✅ Press ESC key on keyboard

Test selecting from preview:

1. Open preview again
2. Click "Select This Design" button
3. Check that:
   • ✅ Preview closes
   • ✅ You're redirected to Hat Lab
   • ✅ Design is selected (see Test 3)

Test 3: Hat Lab with Selected Design

Test design indicator appears:

1. After selecting a design (from Tests 1 or 2), check Hat Lab Step 1
2. Look for "Selected Design" box below the progress bar
3. Check that:
   • ✅ Box appears with design thumbnail
   • ✅ Design name is shown
   • ✅ "Remove" button is present

Test design preview:

1. Hover over the thumbnail
2. Check that:
   • ✅ Larger preview appears as tooltip

Test lightbox from thumbnail:

1. Click the thumbnail
2. Check that:
   • ✅ Full lightbox opens with design
   • ✅ All lightbox features work (close, etc.)

Test removing design:

1. Click the "Remove" button
2. Check that:
   • ✅ Selected design box disappears
   • ✅ You can continue Hat Lab without a design

Test design persists through steps:

1. Select a design again

2. Complete Hat Lab Step 1 (choose style/color)

3. Move to Step 2 (add-ons)

4. Check that:

   • ✅ Selected design box still shows

5. Move to Step 3 (product page)

6. Check that:

   • ✅ Selected design box still shows
   • ✅ File upload is hidden (if you enabled that setting)

Test design in cart:

1. Add the hat to cart
2. View your cart
3. Check that:
   • ✅ Design name appears under the product
   • ✅ Listed as "Design: [Design Name]"

Test 4: Pre-Finished Hat Bridge

Test the block appears:

1. Go to a pre-finished hat product (that you connected a design to)
2. Check that:
   • ✅ "Use this design on a custom hat" block appears
   • ✅ Design preview shows (if you enabled it)
   • ✅ Button looks correct (right style/color)

Test the bridge works:

1. Click the button
2. Check that:
   • ✅ You're redirected to Hat Lab Step 1
   • ✅ Design from the product is now selected
   • ✅ Selected design box appears
   • ✅ You can proceed through Hat Lab normally

Test 5: Product Design Selector Block

Test the selector displays:

1. Go to a product with the design selector block
2. Check that:
   • ✅ Block heading appears
   • ✅ Design thumbnails show in grid
   • ✅ All designs from your gallery appear

Test design preview:

1. Click on a design thumbnail
2. Check that:
   • ✅ Preview lightbox opens
   • ✅ Full design shows clearly
   • ✅ You can close the preview

Test selecting design:

1. If using radio buttons (single):

   • ✅ Click a design to select it
   • ✅ Only one can be selected at a time

2. If using checkboxes (multiple):

   • ✅ Click designs to check them
   • ✅ Multiple can be selected
   • ✅ Click again to uncheck

Test in cart:

1. Select one or more designs
2. Add product to cart
3. View cart
4. Check that:
   • ✅ Design name(s) appear under product
   • ✅ All selected designs are listed

Test 6: File Upload Hiding (If Enabled)

Test upload visibility:

1. Go to product page with both:

   • File upload block
   • Design selector or selected design

2. Initially check:

   • ✅ File upload block is visible

3. Select a design

4. Check that:

   • ✅ File upload block disappears
   • ✅ Page layout adjusts smoothly

5. Remove the design

6. Check that:

   • ✅ File upload block reappears
   • ✅ Upload still works normally

Test 7: Mobile Experience

Repeat Tests 1-6 on a mobile device or in mobile browser mode:

• ✅ Gallery looks good and is easy to navigate
• ✅ Buttons are easy to tap
• ✅ Lightbox works on touch screens
• ✅ Selected design box displays properly
• ✅ Everything is readable at small screen sizes

Test 8: Order Verification

Place a test order:

1. Complete the entire flow with a design selected
2. Place order (use test mode)
3. View order in Shopify admin
4. Check that:
   • ✅ Design appears in line item properties
   • ✅ Design name is clear and readable
   • ✅ You can see which design the customer selected

---

🎨 Customization Options

All blocks and sections have settings you can adjust in the theme customizer. Here's what you can control:

Gallery Section Settings

Access these in Theme Customizer when editing the Design Gallery section:

Content:

• Heading text
• Subheading text
• Button text (appears on hover)
• Empty state message

Layout:

• Designs per row on desktop (1-6)
• Designs per row on mobile (1-3)
• Gap between design cards
• Section padding

Style:

• Border radius (rounded corners)
• Hover effect intensity
• Button style
• Card shadow

Design Selector Block Settings

Access these when editing the Product Design Selector block:

Content:

• Block heading
• Property name (appears in orders)
• Help text

Gallery:

• Which gallery to pull designs from
• Field name (usually designs)

Display:

• Show/hide thumbnails
• Thumbnail size (small, medium, large)
• Grid columns
• Gap between thumbnails

Selection:

• Single selection (radio buttons)
• Multiple selection (checkboxes)

Filters:

• Only show on products with specific tag
• Hide if another property is selected

Pre-Finished Hat Block Settings

Access these when editing the Use Design on Custom Hat block:

Button:

• Button text
• Button style (primary, secondary, outline)
• Button size
• Show icon

Preview:

• Show/hide design image
• Image size
• Image position (above/beside button)

Behavior:

• Where to redirect (Hat Lab step)
• Animation style

Filters:

• Only show on products with specific tag

---

🔄 Customer Journeys

Understanding how customers experience this feature:

Journey 1: Browse Gallery First

The Discovery Path

1. Customer lands on your Design Gallery page
2. Browses available designs
3. Hovers over a design they like
4. Clicks "Bring to Hat Lab" button
5. Arrives at Hat Lab Step 1 with design already selected
6. Sees their selected design in a box below the progress bar
7. Completes Hat Lab (style → add-ons → product selection)
8. Selected design follows them through all steps
9. Adds to cart with design attached
10. Design appears in order details

Best for: Customers who want to start with the design and then customize the hat around it.

Journey 2: Start with Pre-Finished Hat

The Bridge Path

1. Customer finds a pre-finished hat they like
2. Wants that design but on a different hat style
3. Sees "Use this design on a custom hat" button
4. Clicks button
5. Arrives at Hat Lab with the design from that product
6. Customizes a hat with that design
7. Adds to cart

Best for: Converting pre-finished product browsers into custom orders with higher margins.

Journey 3: Add Design During Customization

The Direct Selection Path

1. Customer is already on a Hat Lab product page
2. Sees the design selector block
3. Clicks thumbnails to preview designs
4. Selects one (or more, if checkboxes enabled)
5. Design(s) added as properties
6. File upload disappears (if that setting is on)
7. Adds to cart

Best for: Customers who've already decided on a hat but want to add a design last minute.

🐛 Troubleshooting

Common issues and how to fix them:

Gallery Shows "No designs available"

What's wrong: The gallery can't find your designs.

How to fix:

1. Go to Content → Metaobjects → Design Items
   • Make sure you've created at least one design
2. Go to Content → Metaobjects → Design Galleries
   • Open your gallery
   • Make sure designs are selected in the "designs" field
3. In Theme Customizer, check the gallery section settings:
   • Verify the correct gallery is selected
   • Make sure "Designs field name" is set to designs
4. Save and refresh the page

Selected Design Box Doesn't Appear in Hat Lab

What's wrong: Design isn't being saved when selected.

How to fix:

1. Try selecting the design again
2. Make sure you clicked the "Bring to Hat Lab" button or "Select This Design" button
3. Check that you're redirected to Hat Lab after clicking
4. Try in a different browser (Firefox, Chrome, Safari)
5. Try in private/incognito mode
6. If still not working, contact your developer

File Upload Still Shows When Design Selected

What's wrong: The hiding feature isn't enabled.

How to fix:

1. Go to Theme Customizer
2. Navigate to your product page with file upload
3. Find the "Product File Upload" block
4. Open its settings
5. Look for "Hide when design is selected" toggle
6. Turn it ON
7. Click Save
8. Test again

Pre-Finished Hat Button Not Showing

What's wrong: The product isn't connected to a design.

How to fix:

1. Go to Products in Shopify admin
2. Open the pre-finished hat product
3. Scroll down to "Metafields" section
4. Find "Design Reference"
5. Click "Select entry"
6. Choose the design for this product
7. Click "Save" at the top
8. Refresh the product page

If you still don't see the button:

1. Go to Theme Customizer
2. View the product page
3. Make sure the "Use Design on Custom Hat" block is added
4. Check if there's a "Required product tag" setting
5. If yes, make sure your product has that tag

Preview Lightbox Won't Open

What's wrong: Something is preventing the popup from appearing.

How to fix:

1. Try clicking directly on the design card (not the button)
2. Disable any browser extensions that block popups
3. Try in a different browser
4. Try on a different device
5. Check if the issue happens on all designs or just one
   • If just one, that design's image might be corrupted

Design Not Appearing in Cart or Orders

What's wrong: Design isn't being added as a property.

How to fix:

1. Make sure you see the "Selected Design" box in Hat Lab before adding to cart
2. Check that the design name shows when viewing your cart
3. If using the design selector block:
   • Make sure you actually selected/checked a design
   • Look for a checkmark or radio button selection
4. Try the complete flow again from the beginning

Changes Not Showing Up

What's wrong: Your browser is showing a cached (old) version.

How to fix:

1. Hard refresh the page:
   • Windows: Ctrl + Shift + R
   • Mac: Command + Shift + R
2. Or clear your browser cache:
   • Go to browser settings
   • Find "Clear browsing data"
   • Select "Cached images and files"
   • Clear data
3. Try in private/incognito mode
4. Try a different browser

---

💡 Best Practices

Follow these tips for the best customer experience:

Design Images

File Formats:

• Use PNG for designs with transparency
• Use JPG for designs with solid backgrounds
• Keep file sizes under 500KB for fast loading

Image Sizes:

• Thumbnails: 400x400px minimum
• Full images: 1200x1200px or larger
• Use square images (same width and height) for best results
• Images will be cropped to squares if they're not

Image Quality:

• Use high-resolution images (at least 72 DPI, 150 DPI better)
• Avoid blurry or pixelated designs
• Make sure designs are centered in the image
• Test how they look at both thumbnail and full size

Design Names

Keep Them Clear:

• Under 30 characters works best
• Use customer-friendly language
• Example: "Vintage Logo" not "logo_vintage_v2_final"

Be Descriptive:

• Help customers understand what they're getting
• "Classic Stripe Pattern" is better than "Design 1"
• Include style hints: "Modern Geometric", "Retro Badge"

Stay Consistent:

• Use a naming system across all designs
• If you use categories, put them first: "Vintage: Eagle Logo"
• This helps you manage many designs

Gallery Organization

Start Small:

• Launch with 10-15 of your best designs
• See which ones customers prefer
• Add more based on demand

Create Multiple Galleries:

• Sports designs gallery
• Vintage designs gallery
• Seasonal designs gallery
• Use different galleries on different pages

Group Related Designs:

• Keep similar styles together
• Makes browsing easier
• Helps customers find what they want faster

Update Regularly:

• Add new designs monthly or seasonally
• Remove unpopular designs
• Feature best-sellers at the top (reorder in metaobject)

Product Setup

Use Consistent Tags:

• Pick a tag system and stick with it
• Examples: "pre-finished", "hat-lab-product", "custom"
• Tag all relevant products the same way
• Document your tags somewhere

Pre-Finished Products:

• Always connect the design via metafield
• Use high-quality product photos
• Make the bridge button prominent
• Test each product's flow

Design Selector Placement:

• Put it near the top of product page
• Above or near the "Add to Cart" button
• Make it obvious with a clear heading

Customer Communication

Set Expectations:

• Show example of what customized hat looks like
• Explain any design limitations (size, placement, colors)
• Clarify production time for custom orders

Help Text:

• Add descriptions to complex designs
• Explain if design works better on certain styles
• Note any size or color restrictions

Gallery Page Content:

• Add intro text explaining the process
• Link to Hat Lab page
• Include example finished products
• Answer common questions

Testing Routine

After Adding New Designs:

1. View gallery page - designs show correctly?
2. Click design - preview works?
3. Select design - flows to Hat Lab?
4. Complete order - design shows in cart?

After Connecting Pre-Finished Products:

1. View product - button appears?
2. Click button - redirects correctly?
3. Design shows in Hat Lab?
4. Test complete purchase

Regular Checks:

• Test on mobile monthly
• Try a customer order yourself quarterly
• Check that all links work
• Verify images still load fast

Organization Tips

Document Your Setup:

• Keep a list of which galleries contain which designs
• Note which products have design references
• Track which tags you're using and why

Backup Your Work:

• Take screenshots of metaobject setups
• Export design files and keep originals
• Save theme customizer settings

Plan for Growth:

• Start with a naming system that scales
• Use categories if you plan to have many designs
• Consider how you'll organize 50+ designs

Seasonal Strategy

Plan Ahead:

• Create holiday designs early
• Schedule when to add/remove seasonal designs
• Have year-round designs that always work

Gallery Updates:

• Create seasonal galleries
• Switch which gallery is linked on pages
• Or add multiple gallery sections to one page

Archive Old Designs:

• Don't delete design items (orders may reference them)
• Create an "Archive" gallery
• Remove from active galleries when out of season

---

❓ Frequently Asked Questions

Can I have multiple design galleries?

Yes! Create as many gallery metaobjects as you want. Use different galleries:

• On different pages
• For different product types
• For different seasons or collections

Just create a new "Design Gallery" metaobject entry and select different designs for each.

Will this affect my existing Hat Lab?

No! Your Hat Lab continues to work exactly as before. The design features are completely optional:

• Hat Lab works without any design selected
• Customers can skip design selection
• All existing features remain unchanged

Can customers upload their own designs AND select pre-made ones?

Yes, customers can:

• Upload their own file (if you have file upload blocks)
• Select a pre-made design (if you have design selector blocks)
• Do both (they'll see both in their order)

OR you can enable "Hide file upload when design selected" to make it one or the other.

How do I remove a design from the gallery?

Don't delete the Design Item - orders may reference it.

Instead:

1. Go to Content → Metaobjects → Design Galleries
2. Open your gallery
3. In the "designs" field, deselect that design
4. Save

The design still exists but won't show in the gallery.

Can I charge extra for premium designs?

Not directly through this feature. The design is saved as a line item property (text), not a product.

Workarounds:

1. Create separate products with different prices for premium designs
2. Use a custom pricing app that reads line item properties
3. Manually adjust orders with premium designs

What happens if I change a design's image later?

If you replace the image in a Design Item:

• New image shows in gallery immediately
• Existing orders still reference the old image URL
• Consider creating a new Design Item for major changes

Can customers see their selected design in the cart?

Yes! The design name appears under the product in the cart as "Design: [Name]". The thumbnail doesn't show, just the name.

How do I organize many designs?

Strategies:

1. Multiple galleries - Group by theme/style
2. Clear naming - Use prefixes like "Vintage: Logo 1"
3. Regular pruning - Remove unpopular designs
4. Multiple pages - Different gallery pages for different types

Do designs show up on the product page image?

No, designs don't automatically appear on hat mockups. The "Selected Design" box shows the design separately.

If you want mockups with designs applied, you'll need:

• Pre-finished products with the design already on the hat in photos
• Custom mockup generation (requires developer)

Can I track which designs are most popular?

Yes, but manually:

1. Go to Orders in Shopify
2. Export orders
3. Look at line item properties
4. Count how many times each design appears

Or use an analytics app that can read line item properties.

What file formats work for design images?

• PNG (best for transparent backgrounds)
• JPG (best for photos/solid backgrounds)
• GIF (works but not recommended)
• SVG (not supported - convert to PNG first)

---

📞 Getting Help

If you encounter issues not covered in this guide:

Before Contacting Support:

1. ✅ Work through the troubleshooting section above
2. ✅ Verify all setup steps were completed
3. ✅ Test in incognito/private browsing mode
4. ✅ Try a different browser
5. ✅ Check that all theme customizer changes were saved
6. ✅ Make sure metaobjects are published (not draft)

When Contacting Support:

Include this information:

• Which flow you're testing (gallery, pre-finished, or selector)
• Exact steps you took
• What you expected to happen
• What actually happened
• Browser and device you're using
• Screenshots if possible

Remember:

This feature is completely optional and doesn't affect your existing Hat Lab. If something isn't working, you can:

• Remove the blocks from products
• Remove the gallery section from pages
• Everything else continues to work normally

---

🎉 Summary

You now have a complete design gallery system that lets customers:

• ✅ Browse beautiful design galleries
• ✅ Preview designs before selecting
• ✅ Select designs that flow through Hat Lab
• ✅ Use designs from pre-finished products on custom hats
• ✅ See their selected design throughout the customization process
• ✅ Complete orders with designs tracked in line item properties

What This Means For Your Business:

Increased Sales:

• Customers can easily choose professional designs
• Bridges lower-cost pre-finished products to higher-margin custom orders
• Streamlines the ordering process

Better Customer Experience:

• Visual design browsing
• Clear design selection
• Design persists through entire flow
• No confusion about what's selected

Easy Management:

• Add/remove designs through Shopify admin
• No coding required
• Organize with galleries
• Track in orders

Safe Implementation:

• Doesn't affect existing functionality
• Can be enabled/disabled anytime
• Optional for customers
• Falls back gracefully if not configured

---

🚀 Next Steps

1. Start Small: Set up 5-10 designs to test
2. Test Thoroughly: Work through all the test scenarios
3. Get Feedback: Have team members test the flow
4. Launch: Start promoting your design gallery
5. Monitor: Track which designs are popular
6. Expand: Add more designs based on customer preferences

Happy selling! 🎨